<template>
    <div class="home">
        <nut-row>
            <nut-col :span="24">
                <nut-noticebar text="欢迎使用安聚健康社区系统，更多健康信息请持续关注！">
                </nut-noticebar>
            </nut-col>
            <!--<nut-col :span="3">
                <i class="qrcode" @click="showQrcode"></i>
                <nut-dialog  :visible="dialogShow" @close="dialogShow=false" :noFooter="hideFooter">
                    <div id="readingList">
                        &lt;!&ndash;<me-qrcode :qr-url='link' :qr-size='150'></me-qrcode>&ndash;&gt;
                        <meQrcode :meQrcode="id" :qr-url='link' :qr-size='150' :qr-logo-size="40" :qr-logo="logo"></meQrcode>
                        &lt;!&ndash;<me-qrcode :qr-url='link' :qr-size='150' :qr-text-size="16"  qr-text="Hello Wrold"></me-qrcode>&ndash;&gt;
                    </div>
                </nut-dialog>
            </nut-col>-->
        </nut-row>

        <swiper class="swiptHome"></swiper>
        <funcBar></funcBar>
        <tabbar :message="msg"></tabbar>


        <!--<icon name="drug" :w="30" :h="30"></icon>-->

        <nut-tab>
            <nut-tab-panel tabTitle="约诊列表">
                <myrow v-for="(item,index) in list" :key="index"
                       style="height: 30px;border-bottom: 1px solid #DDDFE6;padding-top: 6px;"
                       @click="myClickCol(item)">
                    <nut-col :span="5" style="text-align: left;">
                        <div class="flex-content">{{item.pname}}</div>
                    </nut-col>
                    <nut-col :span="8" style="color: #999999;text-align: right;">
                        <div class="flex-content flex-content-light">{{item.adviceDate | formatDate }}</div>
                    </nut-col>
                    <nut-col :span="11" style="color: #999999;text-align: right;">
                        <div class="flex-content">{{item.adviceDate | formatTime }}</div>
                    </nut-col>
                </myrow>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="接诊列表">
                <myrow v-for="(item,index) in visitList" :key="index"
                       style="height: 30px;border-bottom: 1px solid #DDDFE6;padding-top: 6px;"
                       @click="myClickCol(item)">
                    <nut-col :span="5" style="text-align: left;">
                        <div class="flex-content">{{item.pname}}</div>
                    </nut-col>
                    <nut-col :span="8" style="color: #999999;text-align: right;">
                        <div class="flex-content flex-content-light">{{item.adviceDate | formatDate }}</div>
                    </nut-col>
                    <nut-col :span="11" style="color: #999999;text-align: right;">
                        <div class="flex-content">{{item.adviceDate | formatTime }}</div>
                    </nut-col>
                </myrow>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="代收费">
                <myrow v-for="(item,index) in chargesList" :key="index"
                       style="height: 30px;border-bottom: 1px solid #DDDFE6;padding-top: 6px;"
                       @click="showCharges(item)">

                    <nut-col :span="20" style="color: #999999;text-align: left;">
                    <div class="flex-content">{{item.lastUpdateBy}}:{{item.orderNo}}</div>
                    </nut-col>
                    <nut-col :span="4" style="color: #999999;text-align: right;">
                        <div class="flex-content flex-content-light">¥{{item.price | formatPrice}}</div>
                    </nut-col>
                </myrow>
            </nut-tab-panel>
            <nut-tab-panel tabTitle="发药查询">
                <myrow v-for="(item,index) in sendList" :key="index"
                       style="height: 30px;border-bottom: 1px solid #DDDFE6;padding-top: 6px;"
                       @click="showsend(item)">
                    <nut-col :span="4" style="color: #999999;text-align: left;">
                        <div class="flex-content">{{item.concat}}</div>
                    </nut-col>
                    <nut-col :span="12" style="color: #999999;text-align: left;">
                        <div class="flex-content">{{item.province}} {{item.city}}{{item.town}}</div>
                    </nut-col>
                    <nut-col :span="6" style="color: #999999;text-align: left;">
                        <div class="flex-content flex-content-light">{{item.phone}}</div>
                    </nut-col>
                </myrow>

            </nut-tab-panel>
        </nut-tab>
    </div>

</template>

<script>
    /* eslint-disable no-console,no-undef */

    // @ is an alias to /src
    import tabbar from '@/components/common/tabbar.vue'
    import funcBar from '@/components/common/funcBar.vue'
    import swiper from '@/components/common/swiper.vue'
    import myrow from '@/components/common/my-row.vue'

    import { pushHistory } from '../router/unit.js' // 引入工具类

    /*import meQrcode from "@/components/common/meQrcode";
    import logo from "@/assets/images/logo/logo-main.png"*/

    export default {
        name: 'home',
        components: {
            tabbar,
            funcBar,
            swiper,
            myrow,
        },
        data() {
            return {
                id:"home",
                // city,
                list: [
                    /*{adviceId: 8, pname: '张龙', adviceDate: 1559533841000, adviceNoon: 'am'},
                    {adviceId: 19, pname: '李四', adviceDate: 1559548800000, adviceNoon: 'pm'},*/
                ],
                visitList: [],
                chargesList:[],
                sendList:[],
                msg: 0,
                updated: false,

                // link1: "value",     // 正常二维码1
                link: "http://api.51self-service.cn/wx/authorize?returnUrl=http%3A%2F%2Fp.51self-service.cn", // 带图片二维码2
                // link3: "value", // 文字二维码3
                // logo: logo,
                dialogShow: false,
                hideFooter:true
            }
        },
        filters: {
            formatPrice: function (price) {
                return new Number((price || 0) / 100).toFixed(2);
            },
            formatDate: function (time) {
                if (time != null && time != "") {
                    let date = new Date(time);
                    return formatDate(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            },
            formatTime: function (time) {
                if (time != null && time != "") {
                    let date = new Date(time);
                    return formatDate(date, "hh:mm:ss");
                } else {
                    return "";
                }
            }
        },
        created() {
            //全局变量
            console.log(this.$store.state.user);
            this.getUserInfo();
        },
        updated() {
            console.log("-------updated---------");
            let _that = this;
            if (_that.updated) {
                setTimeout(function () {
                    _that.getDoctorPreVisits();
                    _that.getDoctorVisited();
                    _that.updated = true;
                }, 5000)
            } else {
                _that.updated = false;
            }

        },
        methods: {
            getUserInfo: function () {
                if (this.$store.state.doctor) {
                    this.getDoctorPreVisits();
                    this.getDoctorVisited();
                    this.getDoctorChargesList();
                    this.getDoctorSendsList();

                } else {
                    this.API.GET(this.ApiUrl.GET_USER_OPENID, {
                        params: {
                            openid: this.$store.state.openid
                        }
                    }).then(({data}) => {
                        if (data.code === 1200) {
                            if (data.data.type === "doctor") {
                                this.$store.state.doctor = data.data.doctorInfo;
                                this.getDoctorPreVisits();
                                this.getDoctorVisited();
                                this.getDoctorChargesList();
                                this.getDoctorSendsList();
                            } else if (data.data.type === "apply") {
                                this.$store.state.apply = data.data.applyInfo;
                                this.goToAuth();
                            }
                        }
                    }).catch(err => {
                        console.log("getUserInfoByOpenid::err------", err);
                        this.getUserInfo();
                    });
                }
            },
            goToAuth: function () {
                this.$router.push({name: 'authentication'});
            },
            goToPay: function (orderNo) {
                this.$router.push({name: 'costClear', params: {orderNo: orderNo}});
            },
            getDoctorPreVisits: function () {
                this.API.GET(this.ApiUrl.GET_PRE_VISIT_TODAY, {
                    params: {
                        doctorId: this.$store.state.doctor.doctorId
                    }
                }).then(({data}) => {
                    console.log("预约列表------", data);
                    if (data.code === 1200) {
                        this.list = data.data;
                    }
                }).catch(err => {
                    console.log("getUserInfoByOpenid::err------", err);
                });
            },
            getDoctorVisited: function () {
                this.API.GET(this.ApiUrl.GET_VISITED_TODAY, {
                    params: {
                        doctorId: this.$store.state.doctor.doctorId
                    }
                }).then(({data}) => {
                    if (data.code === 1200) {
                        this.visitList = data.data;
                    }
                }).catch(err => {
                    console.log("getUserInfoByOpenid::err------", err);
                });
            },
            getDoctorChargesList:function(){
                this.API.POST(this.ApiUrl.POST_GET_CHARGES, {
                    doctorId: this.$store.state.doctor.doctorId,
                    status: 2
                }).then(({data}) => {
                    if (data.code === 1200) {
                        this.chargesList = data.data;
                    }
                }).catch(err => {
                    console.log("getUserInfoByOpenid::err------", err);
                });
            },
            getDoctorSendsList:function(){
                this.API.POST(this.ApiUrl.POST_GET_SEND, {
                   doctorId: this.$store.state.doctor.doctorId,
                    status: 3
                }).then(({data}) => {
                    if (data.code === 1200) {
                        this.sendList = data.data;
                    }
                }).catch(err => {
                    console.log("getUserInfoByOpenid::err------", err);
                });
            },


            //接收子组件传递的值，val参数是传递过来的值
            getData(val) {
                //TODO:后续获取搜索框的传递回来的值
                console.log("receive children's value : " + val)
            },

            //接诊界面
            myClickCol: function (item) {
                /*if (this.$store.state.accept) {
                    console.log("---------destroy accept--------");
                    this.$store.state.accept.$destroy();
                    console.log("---------destroy accept--------");
                }*/
                this.$store.state.medicineList = [];
                this.$store.state.freeInfoList = [];
                this.$store.state.diagMain = null;
                this.$store.state.diagSecond = null;
                let _that = this;
                setTimeout(function () {
                    console.log("---------push accept--------");
                    _that.$router.push({
                        name: 'acceptInfo', params: item
                    });
                },50)
            },

            //代收费详细界面
            showCharges: function (item) {
                item.price = ""+item.price;
                this.$router.push({
                    name: 'chargesInfo',params:{charges:item}
                });
            },
            //待发药信息界面
            showsend:function(){
                this.$router.push({
                    name: 'chargesInfo',params:{charges:item}
                });
            },

            //展示二维码
            showQrcode: function () {
                this.dialogShow = true;
            }
        },
        mounted () {
            pushHistory();
            // 监听历史记录点, 添加返回事件监听
            window.onpopstate = () => {
                // this.$router.push({name:"home"})  //输入要返回的上一级路由地址
                // this.$toast.text("阻止首页返回按钮操作");
                return false;
            }
        }
    }
</script>
<style>
    .home {
        background-color: #e6e6e6;
    }

    .swiptHome {
        margin-top: 7px;
    }

    .home .nut-tab {
        position: relative;
        border: 1px solid #eee;
        padding: 10px 0 0 0;
        font-size: 0.9em;
        background: #eee;
    }

    .home .nut-tab-item{
        height: auto;
        min-height: 400px;
    }

    .home .nav-bar {
        position: absolute;
        height: 2px;
        bottom: -2px;
        left: 0px;
        background: #007aff !important;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .home .nut-tab-active .nut-tab-link {
        font-size: 14px;
        font-weight: bold;
        border: 0;
        color: #007aff !important;
    }

    .qrcode {
        /* position: relative; */
        display: inline-block;
        /* margin-left: 30px; */
        /* line-height: 0; */
        width: 30px;
        height: 30px;
        opacity: .6;
        background: url(../assets/qrcode.png) no-repeat 1px 1px;
        background-size: cover;
        z-index: 9;
        }

    /*.nut-dialog {
        max-width:190px !important;
        max-height:215px !important;
    }*/

</style>
